<template>
  <div class="page-container">
    <el-card class="full-card">
      <div class="main-box">
        <!--左边树-->
        <div class="custom-tree-container">
          <div class="block">
            <div>
              <span>词库分类</span>
              <el-button
                type="text"
                size="mini"
                @click="openLibTypeDialog(undefined)"
              >
                添加类别
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="fetchTreeData"
              >
                刷新
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="expandTree"
              >
                {{ expand ? '收起' : '展开' }}
              </el-button>
            </div>
            <div class="left-tree">
              <el-tree
                ref="elTree"
                :data="treeData"
                default-expand-all
                :expand-on-click-node="false"
                node-key="id"
                @node-click="handleNodeClick"
              >
                <div class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <div @click.stop>
                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-folder-add"
                      @click="() => openLibTypeDialog(data.id)"
                    />

                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-delete"
                      @click="() => remove(node, data)"
                    />

                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-edit"
                      @click="() => rename(node, data)"
                    />

                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-top"
                      @click="() => moveSort(node, data,'up')"
                    />

                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-bottom"
                      @click="() => moveSort(node, data,'down')"
                    />
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
        </div>

        <!--右边列表-->
        <div class="right-list">
          <right-tabel :tree-node="treeNode"/>
        </div>
      </div>
    </el-card>

    <add-category-dialog
      :visible.sync="libTypeDialogVisible"
      :parent-id="currentParentId"
      @submit="handleSubmitCategory"
    />
  </div>
</template>

<script>
import AddCategoryDialog from '@/views/wordLibrary/teachingWordLibrary/official/AddCategoryDialog.vue'
import { deleteById, move, renameName, saveOrUpdate, selectTreeList } from '@/api/wordSystemWordLibType'
import RightTable from '@/views/wordLibrary/teachingWordLibrary/official/rightTabel.vue'
import { selectPage } from '@/api/wordSystemWordLibrary'

export default {
  components: { RightTabel: RightTable, AddCategoryDialog },
  data() {
    return {
      treeData: [],
      libTypeDialogVisible: false,
      currentParentId: '',
      treeNode: {},
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dialogTitle: '新增单词',
      fullSpell: '',
      chemicalForm: {
        chemicalId: null,
        fullSpell: '',
        rootSummary: '',
        difficultyLevel: '',
        occurrence: '',
        unit: ''
      },
      rules: {
        fullSpell: [{ required: true, message: '请输入单词名称', trigger: 'blur' }]
      },
      expand: true
    }
  },
  created() {
    this.fetchTreeData()
    this.fetchData()
  },
  methods: {
    fetchTreeData(params) {
      selectTreeList(params).then(res => {
        this.treeData = res

        if (this.treeData && this.treeData.length === 0) {
          this.treeData.push(this.treeNode)
        }
      })
    },
    expandTree() {
      this.expand = !this.expand
      this.$refs.elTree.store._getAllNodes().forEach(node => {
        node.expanded = this.expand
      })
    },
    fetchData(exactMatch) {
      selectPage({
        page: { pageNum: this.pageNum, pageSize: this.pageSize },
        param: { fullSpell: this.fullSpell, exactMatch: !!exactMatch }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total * 1
      })
    },
    handleNodeClick(data) {
      this.treeNode = data
      this.fetchTreeData({ parentId: data.id })
    },
    openLibTypeDialog(parentId) {
      this.currentParentId = parentId
      this.libTypeDialogVisible = true
    },
    remove(node, data) {
      this.$confirm('确定删除该分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: data.id }).then(() => {
          this.$message.success('删除成功')
          this.fetchTreeData()
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    rename(node, data) {
      this.$prompt('请输入新的类别名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: data.label
      }).then(({ value }) => {
        renameName({ id: data.id, label: value }).then(() => {
          this.$message.success('修改成功')
          this.fetchTreeData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    moveSort(node, data, type) {
      let sort = -1
      if (type === 'down') {
        sort = 1
      }
      move({ id: data.id, sort: sort }).then(res => {
        this.$message.success('排序已生效')
        this.fetchTreeData()
      })
    },
    handleSubmitCategory({ name, parentId }) {
      const reqData = { label: name, parentId: parentId, rootLibType: undefined }
      if (!parentId) {
        reqData.rootLibType = 'primarySchool'
      }
      saveOrUpdate(reqData).then(res => {
        this.$message.success(name + '类别保存成功')
        this.fetchTreeData()
      })
    }
  }
}
</script>
<style scoped>
.page-container {
  height: calc(100vh - 50px);
  padding: 20px;
  box-sizing: border-box;
}

.full-card {
  height: 100%;
}

.main-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
  white-space: nowrap;
  min-width: 250px; /* 不小于 250px */
  justify-content: left !important;
}

.right-list {
  width: 84%;
  padding-left: 10px;
  border-left: 1px solid #3498db;
}

.custom-tree-container {
  width: 250px;
}

.block {
  min-width: 250px;
}

.left-tree {
  height: calc(100vh - 150px);

  overflow-x: auto;
  overflow-y: auto;

  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
}

.left-tree ::v-deep .el-tree {
  display: inline-block;
  width: max-content; /* 标准 */
  width: -webkit-max-content;
  min-width: 100%;
}

.custom-tree-node {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  white-space: nowrap;
  min-width: 250px;
}

.left-tree ::v-deep .el-tree-node__content,
.left-tree ::v-deep .el-tree-node__label,
.custom-tree-node > span {
  overflow: visible !important;
  white-space: nowrap !important;
}

/* 自定义滚动条（仅现代浏览器支持） */
.left-tree::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.left-tree::-webkit-scrollbar-track {
  background: #f5f5f5; /* 滚动条轨道颜色 */
  border-radius: 3px;
}

.left-tree::-webkit-scrollbar-thumb {
  background: #ccc; /* 滚动条滑块颜色 */
  border-radius: 3px;
}

.left-tree::-webkit-scrollbar-thumb:hover {
  background: #999; /* 滑块hover颜色 */
}
</style>

